<template>
  <transition
      @enter="enter"
      @leave="leave"
      :css="false"
  >
    <div class="normalPlayer" v-show="this.isFullScreen">
      <div class="player-warpper">
        <player-header></player-header>
        <player-middle :currentTime="currentTime"></player-middle>
        <player-bottom :totalTime="totalTime" :currentTime="currentTime"></player-bottom>
      </div>
      <div class="player-bg">
        <div class="mask"></div>
        <img :src="currentSong.picUrl">
      </div>
    </div>
  </transition>
</template>

<script>
import PlayerHeader from "./PlayerHeader";
import PlayerMiddle from "./PlayerMiddle";
import PlayerBottom from "./PlayerBottom";
import Velocity from 'velocity-animate'
import 'velocity-animate/velocity.ui'

import {mapGetters, mapActions} from "vuex"

export default {
  props: {
    totalTime: {
      type: Number,
      default: 0,
      required: true
    },
    currentTime: {
      type: Number,
      default: 0,
      required: true
    }
  },
  name: "NormalPlayer",
  components: {
    PlayerHeader,
    PlayerMiddle,
    PlayerBottom
  },
  computed: {
    ...mapGetters([
      'isFullScreen',
      'currentSong'
    ])
  },
  methods: {
    ...mapActions([
      'getSongLyric'
    ]),
    /*
    el : 所需要执行动画的元素
    done : 回调函数 --> 如果想要 leave 执行动画, 那么必须要调用 done()
    * */
    enter(el, done) {
      Velocity(el, 'transition.shrinkIn', {duration: 300}, () => done())
    },
    leave(el, done) {
      Velocity(el, 'transition.shrinkOut', {duration: 300}, () => done())
    }
  },
  watch: {
    //监听歌曲变化, 歌曲发生变化就更改歌词
    currentSong(newValue, oldValue) {
      if (newValue.id === '') {
        return
      }
      this.getSongLyric(newValue.id)
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../assets/css/variable";
@import "../../assets/css/mixin";

.normalPlayer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  @include bg_sub_color();

  .player-warpper {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 999;
  }

  .player-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;

    img {
      height: 100%;
      margin: 0 -100%;
      filter: blur(10px);
    }

    .mask {
      width: 100%;
      height: 100%;
      background: #000000;
      opacity: 0.5;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 99;
    }
  }
}
</style>
